<html>
    <head>
        <title>konockoutJq - example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <link type="text/css" href="css/knockoutjq.css" rel="stylesheet"/>
        <script type='text/javascript' src='js/knockout-2.1.0-debug.js'></script>
        <script type='text/javascript' src='js/jquery-1.7.2-debug.js'></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/utils.js"></script>
        <!--controlls-->
        <script type="text/javascript" src="js/controls/JqSortableList.js"></script>
        <script type="text/javascript" src="js/controls/JqButton.js"></script>
        <script type="text/javascript" src="js/controls/JqDatePicker.js"></script>
        <script type="text/javascript" src="js/controls/JqAccordion.js"></script>
        <script type="text/javascript" src="js/controls/JqSelectableList.js"></script>
        <script type="text/javascript" src="js/controls/JqWindow.js"></script>
        <script type="text/javascript" src="js/controls/JqMask.js"></script>
        <script type="text/javascript" src="js/controls/JqDraggable.js"></script>
        <script type="text/javascript" src="js/controls/JqDroppable.js"></script>

        <script type="text/javascript" src="js/knockoutJq.js"></script>
    </head>
    <style>
        .source {
            border-style: solid; border-width: 1px;
            position:absolute;
            top:0;
            left:0;
            width:300px;
        }
        .destination{
            border-style: solid; border-width: 1px; 
            position:absolute;
            top:0;
            left:320;
            width:300px;
            height: 160px;
        }
        .draganddrop{
            position:relative;
        }
    </style>
    <body>
        <p>
            enabled button<br/>          
            <button data-bind="jqButton: {}">Button</button>
        </p>
        <p>
            disabled button<br/>          
            <button data-bind="jqButton: {enable:false}">Button</button>
        </p>
        <p>
            datepicker<br/>
            <input data-bind="jqDatepicker: myDate, controllOptions: { dateFormat : 'yy/mm/dd'}"/>
        </p>
        <p>
            accordion<br/>
        <div data-bind="jqAccordion: {}">
            <h3><a href="#">Section 1</a></h3>
            <div>
                <p>
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>
            </div>
            <h3><a href="#">Section 2</a></h3>
            <div>
                <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                </p>
            </div>
        </div>
    </p>
    <p>
        Sortable List<br/>
        <button data-bind="jqButton: {}, click: showSortableList">Check List</button><br/>
    <div data-bind="jqSortableList: sortableList" ></div>
</p>
<p>
    Selectable List<br/>
    <button data-bind="jqButton: {}, click: showSelectedItems">Check Selected Items</button><br/>
<div data-bind="jqSelectableList: { result : selectedItems, list: sortableList}"></div>
</p>
<p>
    open window<br/>          
    <button data-bind="jqButton: {}, click: showDialogWindow">Button</button>
</p>
<p>
    mask body<br/>          
    <button data-bind="jqButton: {}, click: mask">Button</button>
</p>
<p>
    drag and drop between twoo lists<br/>
<div class="draganddrop">
    <div class="source">
        <div class="connectedSortable" 
             data-bind="jqSortableList: sortableList, targetList : secondSortableList, controllOptions: { connectWith: 'connectedSortable'}"></div>
    </div>
    <div class="destination">
        <div class="connectedSortable" 
             data-bind="jqSortableList: secondSortableList, targetList: sortableList, controllOptions: { connectWith: 'connectedSortable'}"></div>   
    </div>
</div>
</p>
</body>
</html>
